<!--  
 +---------------------------------------------------------------------- 
 | 狂团[kt8.cn]旗下KtAdmin是为独立版SAAS系统而生的快速开发框架. 
 +---------------------------------------------------------------------- 
 | [KtAdmin] Copyright (c) 2022 http://ktadmin.cn All rights reserved. 
 +---------------------------------------------------------------------- 
 | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) 
 +----------------------------------------------------------------------  
--> 

<script setup>
import AuthContainer from './components/auth-container.vue'
import { reactive, ref, onMounted } from 'vue'
import { CaretRight } from '@element-plus/icons-vue'
import { reqLogin, logindata,postLoginCode,postLoginStatus } from '@/api'
import { useRoute, useRouter } from 'vue-router'
import { useAuth } from '@/hooks'
import { baseConfig } from '@/config'
import {jumpAppInfo} from '@/api'
import bottomCopyringht from '../../components/bottom-copyright.vue'
import { ElMessage } from 'element-plus';
const isWechat = ref(localStorage.getItem('isWechat'))
const router = useRouter()
const route = useRoute()
const logindatas = reactive({
	data: {}
})
onMounted(()=>{
	document.title = `${baseConfig.title}${'-后台登录'}`
})

const formRef = ref(null)
const form = reactive({
	account: '',
	pass: ''
})
const rules = reactive({
	account: [{ required: true, message: '请输入帐号/手机号', trigger: 'blur' }],
	pass: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

// 登录完成后首先取链接中的 redirect 参数回跳
const afterLogin = async(token) => {
	
	// router.push({ path: '/'})
	console.log('asdasd')
	
	// window.location.href = 'https://qiye.3yu.top/app/svideo/user/?token='+encodeURIComponent(token)
	
	let redirects = window.location.href.split('?rediect=')
	let redirect = ''
	if(redirects.length>1){
		redirect = redirects[1]
		let temps = redirect.split('?')
		redirect = temps[0]+'?token='+token
		
		
	}
	console.log(redirect,'aaaaa')
	if (redirect) {
		let url = decodeURIComponent(redirect)
		if (url.startsWith('/')) {
			try {
				console.log(url, 'asdasdasd')
				if (url.indexOf('login') != -1) {
					console.log('asdasdasd')
					router.push({ path: '/', replace: true })
				} else {
					router.push({ path: url, replace: true })
				}

				return
			} catch (e) {
				// dd
			}
		}
		return location.replace(url)
	} else {
		const r = await jumpAppInfo()
		if(r){
			if(r.data.is_direct_app==1){
				if(r.data.app_link){
					window.open(r.data.app_link)
				}else{
					ElMessage.error(r.data.empty_desc)
					
				}
			}
		}
		console.log('asdasdasd22')
		router.push({ path: '/', replace: true })
	}
}
const loading = ref(false)
const submitForm = async (formEl) => {
	if (!formEl) return
	const valid = await formEl.validate()
	if (!valid) return
	loading.value = true
	try {
		const { data } = await reqLogin(form)
		console.log(data, 'kjlk;l;')
		ElMessage({ message: '登录成功', type: 'success' })
		const { setToken } = useAuth()
		setToken(data.token)
		afterLogin(data.token)
		
	} catch (e) {
		// 走全局
		// ElMessage({ message: else.message, type: 'error' })
	}
	loading.value = false
}

const qiweiLoginUrl = ref('https://baidu.com')

const navTo = (name) => {
	router.push({ name, query: route.query })
}
const qrcode = ref('')
const codeForm = ref({
	random:''
})
const isShow = ref(false)
const wechatLogin = async()=>{
	const r = await postLoginCode()
	if(r){
		qrcode.value = r.data.code
		codeForm.value.random = r.data.random
		isShow.value = true
		getResult()
	}
}
const getResult = async()=>{
	setTimeout(async()=>{
		const r = await postLoginStatus({
			random:codeForm.value.random})
	if(r){
		ElMessage({ message: '登录成功', type: 'success' })
		const { setToken } = useAuth()
		setToken(r.data.token)
		afterLogin(r.data.token)
		router.push({ name: 'index',  })
	}else{
		if(isShow.value) getResult()
		
	}
	},1000)
	
}
</script>

<template>
	<div>
		<AuthContainer style="min-height: 700px;">
			
			<div v-loading="loading" class="flex-col login-p">
				<div style="margin-bottom: 40px" class="flex-center">
					<h3 class="flex-1 login-p__title">登录</h3>
					<el-link :underline="false" @click="navTo('register')">
						注册<el-icon class="el-icon--right"><CaretRight /></el-icon>
					</el-link>
				</div>

				<el-form ref="formRef" :model="form" status-icon :rules="rules" label-width="70px" hide-required-asterisk>
					<el-form-item label="登录账号" prop="account">
						<el-input v-model="form.account" type="text" placeholder="帐号/手机号" />
					</el-form-item>
					<el-form-item label="登录密码" prop="pass">
						<el-input v-model="form.pass" show-password type="password" placeholder="密码" @keyup.enter="submitForm(formRef)" />
					</el-form-item>

					<div class="flex-1 flex justify-between">
						<el-link :underline="false" @click="navTo('register')">注册</el-link>
						<el-link :underline="false" @click="navTo('resetPass')">忘记密码</el-link>
					</div>
				</el-form>

				<div class="flex-1 flex-col justify-end login-p__btns">
					<!-- <el-link class="login-p__qiwei" :underline="false" :href="qiweiLoginUrl"></el-link> -->
					<el-button type="primary" @click="submitForm(formRef)">登录</el-button>
				</div>

				<div v-if="isWechat==1" class="temp">
					<div class="otherType">
						<span class="line"></span>
						<span class="title">其他登录方式</span>
					</div>
					<div class="otherLogin">
						<div @click="wechatLogin" class="item">
						</div></div>
				</div>

			
				
			</div>
			
		</AuthContainer>
		<el-dialog v-model="isShow" title="微信登录" width="360px">
			<div class="loginPanel normalPanel">
					<!-- <div class="title">微信登录</div> -->
					<div class="waiting panelContent">
						<div class="wrp_code"><el-image class="qrcode lightBorder" :src="qrcode" /></div>
						<div class="info">
              <div class="status status_browser js_status js_wx_default_tip" id="wx_default_tip">
                <p>使用微信扫一扫登录</p>
           
              </div>
              <div class="status status_succ js_status js_wx_after_scan" style="display:none" id="wx_after_scan">
                <i class="status_icon icon38_msg succ"></i>
                <div class="status_txt">
                  <h4>扫描成功</h4>
                  <p>在微信中轻触允许即可登录</p>
                </div>
              </div>
              <div class="status status_fail js_status js_wx_after_cancel" style="display:none" id="wx_after_cancel">
                <i class="status_icon icon38_msg warn"></i>
                <div class="status_txt">
                  <h4>你已取消此次登录</h4>
                  <p>你可再次扫描登录，或关闭窗口</p>
                </div>
              </div>
            </div>
					</div>
				</div>

		</el-dialog>
		<!-- <bottom-copyringht style="float: left;"></bottom-copyringht> -->
	</div>
	
</template>

<style lang="scss">
.login-p {
	height: 100%;

	&__title {
		font-size: 20px;
		color: var(--primary-color);
	}

	&__btns {
		.el-button {
			font-size: 16px;
			height: 50px;
		}
	}
	&__qiwei {
		height: 44px;
		margin-bottom: 10px;
		background: url('https://3yutop.oss-cn-beijing.aliyuncs.com/login_white_big.png') center no-repeat;
		background-size: 100% 100%;
	}
	.temp{
		position: relative;
	}
	.otherType {
    margin-top: 60px;
    text-align: center;
    position: relative;
}
.otherType span.line {
    position: absolute;
    content: "";
    width: 100%;
    left: 0;
    top: 0;
    height: 1px;
    background-color: #e5e5e5;
}
.otherType span.title {
    position: relative;
    top: -8px;
    background-color: #fff;
    z-index: 9;
    padding: 0 15px;
}
.otherLogin {
	margin-top: 20px;
    text-align: center;
   
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.item{
	background-image: url(../../style/img/wechat.gif);
	width: 40px;
	height: 40px;
	background-size: 100%;
}

}
.impowerBox .title {
    text-align: center;
    font-size: 20px;
}
.impowerBox .info {
    width: 280px;
    margin: 0 auto;
}
.impowerBox .status.status_browser {
    text-align: center;
}

.impowerBox .status {
    padding: 7px 14px;
    text-align: left;
}
.qrcode{
	width: 200px;
	height: 200px;
}
.normalPanel{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.js_wx_default_tip{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

</style>
